<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !isEnd">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview'+'?id='+item._id" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classList.length||isEnd">
			<uni-load-more :status="isEnd?'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getUserWallListApi,
		getWallListApi
	} from '@/api/apis';
	import {
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		gotoHome
	} from '../../utils/common';

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	let isEnd = ref(false)

	onLoad(e => {
		if (e.classid) queryParams.classid = e.classid
		if (e.type) queryParams.type = e.type
		getClassListData()
		uni.setNavigationBarTitle({
			title: e.name
		})
		uni.setStorageSync('classify', e.name)
	})

	onUnload(() => {
		uni.removeStorageSync('classList')
		uni.removeStorageSync('classify')
	})

	onReachBottom(() => {
		if (isEnd.value) return
		queryParams.pageNum++
		getClassListData()
	})

	const classList = ref([])
	const getClassListData = async () => {
		try {
			let res
			if (queryParams.classid) {
				res = await getWallListApi(queryParams)
			} else if (queryParams.type) {
				res = await getUserWallListApi(queryParams)
			} else {
				gotoHome()
				return
			}

			if (res.data.length < queryParams.pageSize) isEnd.value = true
			classList.value = [...classList.value, ...res.data]
			uni.setStorageSync('classList', classList.value)
		} catch (error) {
			isEnd.value = true
		}
	}
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>